<template>
  <n-input-group>
    <n-select
      v-bind="{
        consistentMenuWidth: false,
        clearable: true,
        ...selectProps,
      }"
      :value="result?.type"
      class="flex-shrink-0"
      :options="options"
      :style="{
        width: selectWidth,
      }"
      @update:value="(...arg) => handleChange('type', ...arg)"
    />
    <n-input
      v-bind="{ clearable: true, ...inputProps }"
      :value="result?.name"
      class="flex-1"
      @update:value="(...arg) => handleChange('name', ...arg)"
    >
      <template #suffix>
        <i class="iconfont icon-sousuo color-#ECF2FE"></i>
      </template>
    </n-input>
  </n-input-group>
</template>
<script setup lang="jsx">
import _ from 'lodash-es'

defineOptions({ name: 'SelectInput' })
const props = defineProps({
  options: {
    type: Array,
    default: () => [
      {
        label: '用户名',
        value: 'username',
      },
      {
        label: '动态规划任务名',
        value: 'taskname',
      },
      {
        label: '类型名',
        value: 'typename',
      },
    ],
  },
  selectProps: {
    type: Object,
    default: () => ({}),
  },
  selectWidth: {
    type: String,
    default: '150px',
  },
  inputProps: {
    type: Object,
    default: () => ({}),
  },
})
const result = defineModel('value', {
  type: Object,
  default: () => ({
    type: null,
    name: null,
  }),
})
function handleChange(key, e) {
  // const clone = _.cloneDeep(result?.value || {})
  // clone[key] = e
  // result.value = clone
  // console.log(result.value, key, e, Object.assign(result.value, { [key]: e }))
  result.value = Object.assign(result?.value || {}, { [key]: e })
}
</script>
<style lang="scss" scoped></style>
